import React, { useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import ProgressBar from '../../components/basic/ProgressBar';
import { showVideoPage, bindVideoEle } from '../../store/actions/video.action';
import { generateArtists, once } from '../../utils/common';
import { setVideoConfig, picInPic } from '../../utils/progressbar';
import './index.css';
const mapStateToProps = state => {
    return {
        video: state.video
    }
}
const mapDispatchToProps = dispatch => {
    return {
        showVideoPage: (...args) => dispatch(showVideoPage(...args)),
        bindVideoEle: (...args) => dispatch(bindVideoEle(...args))
    }
}
const fitVideoToContainer = (video, container, videoEle) => {
    if (!video) return;
    let curWidth = container.getBoundingClientRect().width,
        curHeight = container.getBoundingClientRect().height,
        vWidth = video.width,
        curRatio = curWidth / vWidth,
        newHeight = curRatio * curHeight;
    videoEle.style.width = `${curWidth}px`;
    videoEle.style.height = `${newHeight}px`;
}
const setVideoConfigOnce = once(setVideoConfig);
const formatBigNum = n => {
    if (!n) return '';
    let s = n.toString(), len = s.length;
    if (len > 5 && len <= 8) {
        return `${s.slice(0, len - 4)} 万`;
    } else if (len >= 9) {
        return `${s.slice(0, len - 8)} 亿`;
    } else {
        return s;
    }
}
const genVideoBottomTmeplate = video => {
    if (video.curVideo && video.curVideo.relateSong) {
        if (video.curVideo.relateSong.length > 0) {
            return (<div className="bottom-detail">
                    <span className="iconfont icon-like"></span>
                    <span className="iconfont icon-music1"></span>
                    <div className="flowing-text">{`${video.curVideo.relateSong[0].name} - ${generateArtists(video.curVideo.relateSong[0].ar)}`}</div>
                </div>)
        } else {
            return (<div className="bottom-detail">
                    <span className="iconfont icon-music1"></span>
                    <span>暂无相关音乐</span>
                </div>)
        }
    }
    return '';
}
const pictureInPictureHandler = video => {
    picInPic(video);
}

const VideoPage = ({ video, showVideoPage, bindVideoEle }) => {
    const videoRef = useRef();
    const videoContainerRef = useRef();
    const bindDomOnce = once(function (videoEle) {
        bindVideoEle(videoEle);
    });
    useEffect(() => {
        console.log(video.curVideo)
        setVideoConfig(videoRef.current);
        bindDomOnce(videoRef.current);
        fitVideoToContainer(video.curVideo, videoContainerRef.current, videoRef.current);
    }, [video.showVideoPage]);
    return (
        <div className={`video-page-container page-container ${video.showVideoPage ? 'show' : ''}`}>
            <span className="iconfont icon-leftarrow" onClick={() => showVideoPage(false)}></span>
            <span className="iconfont icon-picture-in-picture-2-fill" onClick={() => pictureInPictureHandler(videoRef.current)}></span>
            <div className="video-area" ref={videoContainerRef}>
                <span className={`iconfont icon-play-full`}></span>
                <video ref={videoRef} autoPlay={true} src={video.curVideo.urlInfo ? video.curVideo.urlInfo.url : ''} ></video>
            </div>
            <div className="video-bottom">
                <ProgressBar type={3}/>
                {
                    genVideoBottomTmeplate(video)
                }
            </div>
            <div className="video-detail-pad">
                <div className="avatar">
                    <img src={video.curVideo && video.curVideo.creator ? video.curVideo.creator.avatarUrl : ''} />
                    <span>{video.curVideo && video.curVideo.creator ? video.curVideo.creator.nickname : ''}</span>
                </div>
                <div className="video-description">
                    {video.curVideo ? video.curVideo.description || video.curVideo.title : ''}
                </div>
                <p> {video.curVideo ? `${formatBigNum(video.curVideo.playTime)} 次观看` : ''} </p>
            </div>
            <div className="interaction-pad">
                <div className="interaction-unit">
                    <span className="iconfont icon-tubiaozhizuo-"></span>
                    <span>{video.curVideo ? formatBigNum(video.curVideo.praisedCount) : ''}</span>
                </div>
                <div className="interaction-unit">
                    <span className="iconfont icon-pinglun"></span>
                    <span>{video.curVideo ? formatBigNum(video.curVideo.commentCount) : ''}</span>
                </div>
                <div className="interaction-unit">
                    <span className="iconfont icon-fenxiang1"></span>
                    <span>{video.curVideo ? formatBigNum(video.curVideo.shareCount) : ''}</span>
                </div>
                <div className="interaction-unit">
                    <span className="iconfont icon-shoucang"></span>
                    <span>收藏</span>
                </div>
            </div>
        </div>
    )
}

export default connect(mapStateToProps, mapDispatchToProps)(VideoPage);